<template>
    <div class="main_container">
        <div v-if="pageName=='index'">
            <el-form :model="queryParams" label-width="auto">
                <el-row>
                    <el-col :span="7">
                        <el-form-item label="关键词:">
                            <el-input style="width: 200px;" maxlength="100" v-model="keyword"
                                @keyup.enter.native="handleQuery" @clear="handleQuery" 
                                placeholder="订单编号/商品名称/备注" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="供货商:">
                            <div class="choose_border" @click="chooseSuppliers()">
                                <span style="color: #c0c4cf;" v-if="!queryParams.supplier_name">请选择</span>
                                <span>{{ queryParams.supplier_name }}</span>
                                <i class="el-icon-circle-close icon" @click.stop="clearValue('supplier')"></i>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="采购日期:">
                            <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" 
                                v-model="queryParams.create_datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                                placeholder="请选择时间区间" style="width: 240px;" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <div style="display: flex;align-items: center;margin-top: 5px;" @click="showMore=!showMore">
                            <el-button size="small" icon="el-icon-search" @click.stop="handleQuery"
                                style="margin-right: 10px;" class="btn_primary_color">查询</el-button>
                            <i :class="showMore?'el-icon-d-arrow-left':'el-icon-d-arrow-right'" style="transform: rotate(90deg);"></i>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-if="showMore">
                    <el-col :span="7">
                        <el-form-item label="发票状态:">
                            <el-select style="width: 200px;" v-model="queryParams.invoice_status" placeholder="请选择"
                                @change="handleQuery" clearable>
                                <el-option label="无需开票" value="0"></el-option>
                                <el-option label="已开票" value="2"></el-option>
                                <el-option label="未开票" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="经办人:">
                            <div class="choose_border" @click="chooseUsers('handler')">
                                <span style="color: #c0c4cf;" v-if="!queryParams.handler_name">请选择</span>
                                <span>{{ queryParams.handler_name }}</span>
                                <i class="el-icon-circle-close icon" @click.stop="clearValue('handler')"></i>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row class="mb8">
                <el-button
                    style="margin-right: 18px;"
                    class="btn_primary_color"
                    icon="el-icon-plus"
                    size="small"
                    @click="handleAdd"
                    v-hasPermi="['purchase_add']"
                >新增</el-button>

                <el-dropdown placement="bottom" @command="handleCommand">
                     <el-button type="primary" size="small" class="btn_primary_color">
                        批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-hasPermi="['import_purchase']" command="import">导入</el-dropdown-item>
                        <el-dropdown-item v-hasPermi="['export_purchase']" :disabled="multiple" command="export">导出所选</el-dropdown-item>
                        <el-dropdown-item v-hasPermi="['export_purchase']" command="exportAll">导出全部</el-dropdown-item>
                        <el-dropdown-item v-hasPermi="['purchase_del']" :disabled="multiple" command="remove">删除所选</el-dropdown-item>
                        <el-dropdown-item command="draft">草稿箱</el-dropdown-item>
                        <el-dropdown-item v-hasPermi="['set_purchase_invoice']" command="invoice">采购开票</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-row>

            <el-table border :data="buyLists" @selection-change="handleSelectionChange" style="margin-top: 15px;">
                <el-table-column type="selection" width="60" align="center" />
                <el-table-column label="单号" align="left" prop="corp_order_no" />
                <el-table-column label="供货商名称" align="left" prop="supplierName" />
                <el-table-column label="采购金额" align="left" prop="shouldReceived" />
                <el-table-column label="采购时间" align="left" prop="purchase_date" />
                <el-table-column label="订单状态" align="left" prop="statusName">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status=='0'" style="color: red;">{{ scope.row.statusName }}</span>
                        <span v-else-if="scope.row.status=='1'" style="color: #00b8ae;">{{ scope.row.statusName }}</span>
                        <span v-else style="color: red;">{{ scope.row.statusName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="发票状态" align="left">
                    <template slot-scope="scope">
                        <span v-if="scope.row.invoice_status===0" style="color: #999;">无需开票</span>
                        <span v-else-if="scope.row.invoice_status===1" style="color: red;">未开票</span>
                        <span v-else style="color: #00b8ae;">已开票</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="发票号" align="left" prop="invoice_no" /> -->
                <el-table-column label="经办人" width="90" align="left" prop="handler" />
                <el-table-column label="操作" width="200" align="left" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleView(scope.row)"
                            style="font-weight: bold;"
                        >查看</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                            style="font-weight: bold;"
                            v-hasPermi="['purchase_update']"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handlePrint(scope.row)"
                            style="font-weight: bold;"
                        >打印</el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleRemove(scope.row)"
                            style="font-weight: bold;"
                            v-hasPermi="['purchase_del']"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-show="total>0"
                background
                style="padding: 32px 16px;background: #fff;text-align: right;"
                @size-change="getBuyLists"
                @current-change="getBuyLists"
                :current-page.sync="pageParam.page"
                :page-size="pageParam.num"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <!-- 新增页面 -->
        <common-dialog :visiable="pageName == 'addOrder'">
            <add-order :corpId="corp_id" @hidden="hidden" @success="success"></add-order>
        </common-dialog>
        <!-- 编辑页面 -->
        <common-dialog :visiable="pageName == 'editOrder'">
            <add-order :corpId="corp_id" :isDraftStatus="isDraft" :editId="editId" @hidden="hidden" @success="success"></add-order>
        </common-dialog>
        <!-- 查看页面 -->
        <common-dialog :visiable="pageName == 'queryOrder'">
            <query-order :corpId="corp_id" :editId="editId" @hidden="hidden"></query-order>
        </common-dialog>
        <!-- 草稿箱 -->
        <common-dialog :visiable="pageName == 'draftBox'">
            <draft-box @callback="callback" @hidden="hidden"></draft-box>
        </common-dialog>
        <!-- 批量开票 -->
        <common-dialog :visiable="pageName == 'invoice'">
            <invoice :corpId="corp_id" @success="success"></invoice>
        </common-dialog>

        <!-- 选择经办人 -->
        <choose-user
            :showChooseUser="showChooseUserAlert"
            :selectUsers="selectedUsers.users"
            :title="selectedUsers.title"
            @chooseOK="chooseUserOK"
            @hidden="showChooseUserAlert=false"
        ></choose-user>

        <!-- 选择供货商 -->
        <choose-supplier
            :showChooseSupplier="showChooseSupplierAlert"
            :selectUsers="supplierList"
            @chooseOK="chooseSupplierOK"
            @hidden="showChooseSupplierAlert=false"
        ></choose-supplier>

        <!-- 打印采购单 -->
        <el-dialog :close-on-click-modal='false' title="打印采购单" center :visible.sync="showPrintOrderAlert"
             @close="showPrintOrderAlert=false">
            <print-order :printObj='printObj' @submit="printCallback" />
        </el-dialog>
        
        <!-- 导入弹窗 -->
        <el-dialog
            title="导入采购单"
            :visible.sync="showImport"
            width="40%"
            append-to-body
            @close="closeImport"
            :close-on-click-modal="false"
            center>
            <div class="upload_view">
                <el-upload drag
                    :limit="1"
                    :on-exceed="handleExceed"
                    :on-remove="handleRemoveFile"
                    :http-request="(params) => uploadSectionFile(params, 'picUpload')" 
                    :accept="picUpload.accept.join(',')"
                    :file-list="fileList"
                    action="anything">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <span>只能上传{{ picUpload.accept.join('、') }}文件，且不超过{{ picUpload.max }}MB</span>
                            <span style="color: #068CEE;cursor: pointer;" @click="downloadTemplate">下载模板</span>
                        </div> 
                        <div v-if="showImportError" style="display: flex;align-items: center;justify-content: space-between;color: red;margin-top: 10px;">
                            <span class="shake_words">{{ taskInfo.error_msg }}</span>
                            <span style="color: #068CEE;cursor: pointer;" @click="downloadFail">下载导入失败文件</span>
                        </div>
                    </div>
                </el-upload>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="btn_primary_color" @click="startUpload">开始导入</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import commonDialog from "@/components/commonDialog";
import { getSupplierList } from "@/api/cooperate";
import { getUserList } from "@/api/user";
import { getBuyList, removeBuy, removeBatchBuy } from "@/api/purchase";
import { addDownloadTask, addImportTask, getImportTaskInfo } from '@/api/common';
import { commonUpload } from '@/api/util';
import chooseUser from "@/components/chooseUser";
import chooseSupplier from "@/components/chooseSupplier";
import printOrder from "@/components/printOrder";
import { baseUrl } from '@/config/env';
const moment = require('moment')

export default {
    name: 'purchaseOrder',
    data() {
        return {
            fullPageLoading: null,  //全屏loading
            showChooseUserAlert: false,
            showChooseSupplierAlert: false,
            showImportError: false,
            showPrintOrderAlert: false,
            showImport: false,
            showLoading: false,
            exportLoading: false,
            multiple: true,
            corp_id: '',
            editId: null,  //订单id
            isAdmin: false,
            isDraft: false,
            showMore: false,
            keyword: '',
            queryParams: {
                supplier_id: '',
                supplier_name: '',
                handler_user_id: '',
                handler_name: '',
                create_datetime: [],
                purchase_date__lte: '',  //小于等于
                purchase_date__gte: '',  //大于等于
                invoice_status: ''
            },
            pageParam: {
                page: 1,
                num: 10
            },
            userType: '',
            total: 0,
            buyLists: [],
            supplierList: [],
            handlersList: [],
            pageName: 'index',
            exportParam: {
                corp_id: '',
                params: {},
                task_type: 'export_purchase',
                params_method: 0,
                file_name: '采购单'+moment().format('yyyyMMDDHHmmss')+'.xlsx'
            },
            picUpload: {
                max: 10,
                accept: ['.xls', '.xlsx']
            },
            fileList: [],
            uploadParam: {},
            taskInfo: {},
            timer: null,
            selectIds: [],
            selectedSize: '',
            printObj: {}
        }
    },
    watch: {
        'queryParams.create_datetime': {
            handler(value){
                if(value){
                    this.queryParams.purchase_date__lte = value[1]
                    this.queryParams.purchase_date__gte = value[0]
                }
                else{
                    this.queryParams.purchase_date__lte = this.queryParams.purchase_date__gte = null
                }
                this.handleQuery()
            },
            deep: true
        },
        '$route.query.bussId5': {
            immediate: true, // 首次加载时触发
            handler(newId) {
                if (newId) {
                    this.pageName = 'queryOrder'
                    this.editId = null
                }
            }
        }
    },
    computed: {
        selectedUsers() {
            let users = []
            if (this.queryParams.handler_user_id){
                users = [{id: this.queryParams.handler_user_id}]
            }
            let title = '选择经办人'
            return {
                users, title
            }
        }
    },
    components: {
        commonDialog,
        chooseUser,
        chooseSupplier,
        printOrder,
        addOrder: () => import('./add.vue'),
        queryOrder: () => import('./query.vue'),
        draftBox: () => import('./draftBox.vue'),
        invoice: () => import('./invoice.vue'),
    },
    created() {
        this.corp_id = this.$store.state.corpId
        this.exportParam.corp_id = this.corp_id
        this.isAdmin = this.$store.state.isAdmin
        this.getBuyLists()
    },
    methods: {
        // 按条件筛选
        handleQuery() {
            this.pageParam.page = 1
            if (this.keyword){
                this.queryParams._search = this.keyword
            }else{
                delete this.queryParams['_search']
            }
            this.getBuyLists()
        },
        chooseUsers(type) {
            this.userType = type
            this.showChooseUserAlert = true
        },
        chooseSuppliers() {
            this.showChooseSupplierAlert = true
        },
        clearValue(type) {
            if (type == 'handler'){
                this.queryParams.handler_user_id = ''
                this.queryParams.handler_name = ''
            }else if (type == 'supplier'){
                this.queryParams.supplier_id = ''
                this.queryParams.supplier_name = ''
            }
            this.handleQuery()
        },
        chooseUserOK(res) {
            if (this.userType == 'handler'){
                this.queryParams.handler_user_id = res.length ? res[0].id : ''
                this.queryParams.handler_name = res.length ? res[0].username : ''
            }
            this.handleQuery()
            this.showChooseUserAlert = false
        },
        chooseSupplierOK(res) {
            this.queryParams.supplier_id = res.length ? res[0].id : ''
            this.queryParams.supplier_name = res.length ? res[0].name : ''
            this.handleQuery()
            this.showChooseSupplierAlert = false
        },
        // 获取订单列表
        getBuyLists(){
            this.queryParams.corp = this.corp_id
            this.queryParams.is_draft = 0
            let params = Object.assign({}, this.queryParams, this.pageParam)
            getBuyList(params).then(res => {
                let list = res.data.data.purchase_list.filter(item => {
                    item.supplierName = item.supplier_detail.name
                    item.corp_order_no = item.corp_order_no || ''
                    item.handler = item.handler_user_detail ? item.handler_user_detail.username:''
                    item.shouldReceived = parseFloat(item.sold_price).toFixed(2)
                    item.pending_payment = parseFloat(item.pending_payment) || 0
                    if (item.is_pay){  //全部付款
                        item.status = '1'
                        item.statusName = '已结清'
                    }else {
                        if (parseFloat(item.pending_payment) == parseFloat(item.sold_price)){  //未结清
                            item.status = '0'
                            item.statusName = '未结清'
                        }else{  //部分付款
                            item.status = '2'
                            item.statusName = '待收款：￥'+ item.pending_payment.toFixed(2)
                        }
                    }

                    item.invoice_no = ''
                    if (item.sale_invoice_show && item.sale_invoice_show.length){
                        item.invoice_no = item.sale_invoice_show.map(el => el.invoice_no).join(',')
                    }
                    return item
                })
                this.buyLists = list
                this.total = res.data.data.total
            })
        },
        // 多选框选中数据
        handleSelectionChange (selection) {
            // console.log(selection);
            this.multiple = !selection.length
            let ids = selection.map(item => item.id)
            this.selectIds = ids
            if (ids.length){
                this.exportParam.params.id_list = ids.join(',');
            }
        },

        handleCommand(command) {
            switch (command) {
                case 'import':
                    this.handleImport()
                    break;
                case 'export':
                    this.handleExport()
                    break;
                case 'exportAll':
                    this.handleExport('all')
                    break;
                case 'remove':
                    this.handleRemoveSelect()
                    break;
                case 'draft':
                    this.draftBox()
                    break;
                case 'invoice':
                    this.handleInvoice()
                    break; 
                default:
                    break;
            }
        },
        // 新增
        handleAdd() {
            this.editId = null
            this.isDraft = false
            this.pageName = 'addOrder'
        },
        // 编辑
        handleEdit(item) {
            this.editId = item.id
            this.isDraft = false
            this.pageName = 'editOrder'
        },
        // 采购开票
        handleInvoice() {
            this.pageName = 'invoice'
        },
        // 删除所选
        handleRemoveSelect() {
            let that = this
            this.$confirm('您确定要删除选中的采购单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeBatchBuy({
                    corp_id: that.corp_id,
                    pk_id_list: that.selectIds
                }).then(res => {
                    if (res.code == 200){
                        that.handleQuery()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
					}
                })
            }).catch(() => {        
            });
        },
        // 删除
        handleRemove(item) {
            let that = this
            this.$confirm('您确定要删除该采购单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeBuy(item.id, {
                    corp: that.corp_id
                }).then(res => {
                    if (res.code == 200){
                        that.handleQuery()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
					}
                })
            }).catch(() => {        
            });
        },
        // 打印
        handlePrint(item) {
            this.printObj = {
                type: 'purchase',
                unique_order_no: item.unique_order_no,
                pk_id: item.id,
                corp_order_no: item.corp_order_no
            }
            this.showPrintOrderAlert = true
        },
        printCallback(res) {
            console.log(res)
            this.showPrintOrderAlert = false
        },
        // 查看
        handleView(item) {
            this.editId = item.id
            this.pageName = 'queryOrder'
        },
        // 导入
        handleImport() {
            this.showImportError = false
            this.showImport = true
        },
        closeImport() {
            this.uploadParam = {}
            this.fileList = []
            this.showImport = false
        },
        // 导出
        handleExport(type) {
            this.exportParam.params = Object.assign({}, this.exportParam.params, this.queryParams)
            if (type && type=='all'){
                delete this.exportParam.params['id_list']
            }
            addDownloadTask(this.exportParam).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '文件正在下载中，请至任务列表中查看',
                        type: 'success',
                        duration: 2000
                    })
                    this.$store.dispatch('GetTaskList', this.corp_id); 
                    this.$store.dispatch('startInterval')
                }
            })
        },
        // 设置字段
        handleSetting() {
            this.pageName = 'setOrder'
        },
        // 草稿箱
        draftBox() {
            this.pageName = 'draftBox'
        },
        hidden(val) {
            if (val && val.isDraft){
                this.pageName = 'draftBox'
            }else{
                this.pageName = 'index'
            }

            if (this.$route.query.bussId5){
                this.$router.replace({ path: this.$route.path, query: {} });
            }
            if (val && val.isRefresh=='true'){
                this.handleQuery()
            }
        },
        success(data) {
            if (data){
                this.$message({
                    message: data.message,
                    type: 'success'
                })
            }
            this.handleQuery()
            this.pageName = 'index'
        },
        callback(item) {
            this.editId = item.id
            this.isDraft = true
            this.pageName = 'editOrder'
        },

        // 选择供货商
        personChange(value) {
            let [ id, name ] = value.split('&&')
            this.queryParams.supplier_id = id
            this.queryParams.supplier_name = name
        },
        remoteMethodWithCustomer(query) {
            if (query !== '') {
                this.showLoading = true
                getSupplierList({
                    corp: this.corp_id,
                    category: '',
                    search: query
                }).then(res => {
                    this.showLoading = false
                    this.supplierList = res.data.data.supplier_list.filter(item => {
                        item.label = item.name
                        item.value = item.id+'&&'+item.name
                        if (item.category_detail && item.category_detail.name){
                            item.label += ('（'+item.category_detail.name+'）')
                        }
                        return item
                    });
                })
            } else {
                this.supplierList = []
            }
        },

        // 选择经办人
        handlerPersonChange(value) {
            let [ id, username ] = value.split('&&')
            this.queryParams.handler_user_id = id
            this.queryParams.handler_name = username
        },
        remoteMethodWithHandler(query) {
            if (query !== '') {
                this.showLoading = true
                getUserList({
                    corp: this.corp_id,
                    username: query
                }).then(res => {
                    this.showLoading = false
                    this.handlersList = res.data.users.filter(item => {
                        item.label = item.username
                        item.value = item.id+'&&'+item.username
                        if (item.phone_no){
                            item.label += ('（'+item.phone_no+'）')
                        }
                        return item
                    });
                })
            } else {
                this.handlersList = []
            }
        },

        //  ------------------------------- 文件上传相关 --------------------------------
        // 文件超出个数限制时
        handleExceed() {
            this.$message.warning('只能上传一个文件，若需要重新上传，请先删除已上传文件')
        },
        // 文件列表移除文件
        handleRemoveFile() {
            this.uploadParam = {}
        },
        // 上传前校验
        beforeUpload (file, uploadType) {
            let isRightSize = file.size / 1024 / 1024 < this[uploadType].max
            if (!isRightSize) {
                this.$message.error('文件大小超过' + this[uploadType].max + 'MB')
            }
            let fileArr = file.name.split('.')
            let ext = fileArr[fileArr.length - 1]
            let isAccept = new RegExp(this[uploadType].accept.join('|')).test('.' + ext.toLowerCase())
            if (!isAccept) {
                this.$message.error('请上传' + this[uploadType].accept.join(',') + '类型的文件')
            }
            return isRightSize && isAccept
        },
        // 附件上传
        uploadSectionFile (params, uploadType) {
            let _this = this
            if (!this.beforeUpload(params.file, uploadType)) {
                params.onError()
                return
            }
            
            let param = {
                corp: _this.corp_id,
                user: _this.$store.state.userInfo.id,
                file_path: params.file
            }
            commonUpload('/commons/inner_upload_file_view', param).then(res => {
                if (res.code == 200){
                    _this.$message.success('上传成功')
                    _this.uploadParam = res.data
                }else{
                    _this.$message.error('上传失败，请重新上传')
                    _this.uploadParam = {}
                } 
            })
        },
        // 开始上传
        startUpload() {
            if (Object.keys(this.uploadParam).length === 0){
                this.$message.error('请先上传要导入的文件')
                return
            }

            let that = this
            addImportTask({
                corp_id: this.uploadParam.corp,
                file_upload_id: this.uploadParam.id,
                task_type: 'import_purchase',
                file_name: ''
            }).then(res => {
                if (res.code == 200){
                    that.fullPageLoading = that.$loading({
                        lock: true,
                        text: '正在导入数据，请稍候...',
                        spinner: 'el-icon-loading',
                        // background: 'rgba(0, 0, 0, 0.7)'
                    });
                    that.timer = setInterval(() => {
                        that.getTaskStatus(res.data.id)
                    }, 5000);
                }
            })
        },
        // 获取导入任务详情
        getTaskStatus(pk_id) {
            let corp = this.corp_id
            getImportTaskInfo({corp, pk_id}).then(res => {
                let task_status = res.data.task_status
                if (task_status == 1){  //导入成功
                    clearInterval(this.timer)
                    this.fullPageLoading.close()
                    this.showImport = false
                    this.$message.success('导入成功')
                    this.handleQuery()
                }else if (task_status==2 || task_status==4){  //导入失败
                    clearInterval(this.timer)
                    this.fullPageLoading.close()
                    this.showImportError = true
                    this.taskInfo = res.data
                    this.taskInfo.error_msg = res.data.error_msg? ('导入失败：'+res.data.error_msg) : '导入失败'
                    this.handleQuery()
                }
            })
        },
        // 下载导入失败文件
        downloadFail() {
            let url = baseUrl+'/commons/download_import_error_file_view?pk_id='+this.taskInfo.id+'&token='+this.taskInfo.token+
				'&execute_time_unix='+this.taskInfo.execute_time_unix
                let that = this
				fetch(url).then(response => {
						if (!response.ok) {
							throw new Error('Network response was not ok');
						}
						return response.blob(); // 将响应转换为 Blob 对象
					})
					.then(blob => {
						const url = window.URL.createObjectURL(blob); // 创建一个指向 Blob 的 URL
						const a = document.createElement('a'); // 创建一个 <a> 元素
						a.style.display = 'none';
						a.href = url;
						a.download = '导入失败文件.xlsx'; // 设置下载的文件名
						document.body.appendChild(a);
						a.click(); // 模拟点击下载
						window.URL.revokeObjectURL(url); // 释放 Blob URL
						document.body.removeChild(a); // 移除 <a> 元素
						that.showPop = true
					})
					.catch(error => console.error('下载文件时出错:', error));
        },
        // 模板下载
        downloadTemplate() {
            window.location.href = 'https://anhuiyaoying.com/webs/template/%E9%87%87%E8%B4%AD%E5%8D%95%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx'
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';
    .upload_view {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<style>
.el-loading-spinner {
    top: 42% !important;
    color: #068CEE !important;
}
.el-loading-spinner .el-icon-loading {
    font-size: 34px !important;
    margin-bottom: 15px !important;
}
.el-loading-spinner .el-loading-text {
    font-size: 16px !important;
}
</style>